<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
</head>
<body>

    <div id="app">
        <!-- 通过组件的名称利用标签进行调用 -->
        <hello1-com></hello1-com>
        <person-com></person-com>
    </div>


    <!-- 定义第一个组件 -->
    <template id="hello1Tem">
        <div>
            <h3>{{msg}}</h3>
        </div>
    </template>

    <!-- 定义第一个组件 -->
    <template id="personCom">
        <div>
            <h3>{{msg}}</h3>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        // 定义对象1
        let hello1 = {
            data(){
                return{
                    msg: "11111"
                }
            },
            // 定义组件模块
            template: "#hello1Tem"
        }

        // 定义对象2
        let personCom = {
            data() {
                return {
                    msg: "2222222222"
                }
            },
            template: "#personCom"
        }

        const app = new Vue({
            el: "#app",
            // 定义局部组件
            components: {
                // key 组件名称, value 组件内容
                hello1Com: hello1,
                personCom: personCom
            }
        })


    </script>
</body>
</html>